<template>
  <div id="One">
    <h1>嵌套路由</h1>
    <div id="box">
      <div id="left" >
        <router-link v-for="(item,index) in btn" :key="index" :to="{
          query:{
            name:item.name
          }
        }">{{item.name}}</router-link>
      </div>
      <div id="content">
        <router-view></router-view>
      </div>
    </div>
  </div> 
</template>

<script setup lang='ts' name=''>
import { ref } from 'vue';

const btn = ref([
  {
    name: 'one1',
  },
  {
    name: 'one2',
  },
  {
    name: 'one3',
  },
  {
    name: 'one4',
  },
])

</script>

<style scoped>
  h1 {
    text-align: center;
  }
  #left{
    width: 150px;
    height: 320px;
    background-color: #ccc;
    float: left;
    border: 1px solid black;
  }
  #left > a {
    width: 100px;
    height: 50px;
    margin: 20px auto;

    text-align: center ;
    text-decoration:none;
    line-height: 50px;
    border: 1px solid black;  
    display: block;
  }
  #content {
    margin-right: 20px;
    width: 800px;
    height: 320px;
    background-color: #ccc;
    float: right;
    border: 1px solid black;
  }
</style>